
<template>
  <div :style="'border:'+(selected?'2px solid #fff':'none')" @click="selectItem" class="effect">
    <el-text line-clamp="1" class="effect-text no-select">{{ props.action.data.title }}</el-text>
    <div class="effect-keyframe" @click.stop="selectKeyframe(keyFrame)"  :style="'left:'+(keyFrame.left-7)+'px'" v-for="(keyFrame,idx) in keyFrames"></div>
  </div>
</template>
<script setup>
import {onMounted,computed,getCurrentInstance,ref} from 'vue'
import { scaleWidth } from '../data/timelineData';
import {componentTypes, mittTypes} from "@/util/types"
import { useSceneStore } from '@/stores/scene'
const { appContext : { config: { globalProperties } } } = getCurrentInstance();

const internalInstance = getCurrentInstance()
const emitter = internalInstance.appContext.config.globalProperties.emitter
const sceneStore = useSceneStore();
const props = defineProps({
  action: {
    type: Object,
    default: null
  },
  row: {
    type: Object,
    default: null
  },
  timelineScale: {
    type: Number,
    default: null
  },
  isResizing: {
    type: Boolean,
    default: false
  },
  isMoving: {
    type: Boolean,
    default: false
  },
})
let keyFrames = computed(()=>{
    let keyFrames = []
    if(props.action.data.keyFrames&&!props.isResizing&&!props.isMoving){
      props.action.data.keyFrames.forEach(element => {
        keyFrames.push({
          actionId:props.action.id,
          time:element.time,
          left:scaleWidth/props.timelineScale*(element.time-props.action.start)
        })
      });
    }
    
    return keyFrames;
})
const selected = ref(false)
function selectKeyframe(keyFrame){
  console.log(keyFrame)
  emitter.emit(mittTypes.TIMELINE.SET_CURRENT_TIME,keyFrame.time)
}
function selectItem(){
  let list
  switch(props.action.effectId){
    case componentTypes.FLOW_EDIT.IMAGE:
    list =  sceneStore.currentFlowNode.imageList
      break;
    case componentTypes.FLOW_EDIT.VIDEO:
    list =  sceneStore.currentFlowNode.videoList
      break;
    case componentTypes.FLOW_EDIT.SVGANIM:
    list =  sceneStore.currentFlowNode.svgAnimList
      break;
    case componentTypes.FLOW_EDIT.ACTION:
    list =  sceneStore.currentFlowNode.actionList
      break;
    case componentTypes.FLOW_EDIT.EVENT:
      emitter.emit(mittTypes.TIMELINE.SET_CURRENT_TIME,props.action.start)
      break;
  }
  if(list){
    let struct
    let actionId
    list.forEach(function(element){
      element.timelineData.actions.forEach(function(action){
        if(action.id == props.action.id){
          struct = element;
          actionId = action.id;
        }
      })
      
    })
    if(struct){
      if(props.action.effectId == componentTypes.FLOW_EDIT.ACTION){

      }else{
        emitter.emit(mittTypes.LAYOUT.SHOW_CENTER_RIGHT,true)
      }
      
      emitter.emit(mittTypes.ATTR.SELECT_ITEM, {
        type:props.action.effectId,
        data:struct,
        actionId:actionId
      })
    }
  }
  
  
}
onMounted(() => {
  // console.log(props.row)
  emitter.on(mittTypes.ATTR.SELECT_ITEM, function(val){
    if(val&&(val.actionId == props.action.id)){
      selected.value = true;
    }else{
      selected.value = false;
    }
  })
})
</script>
<style lang="scss" scoped>
.effect{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  &-text{
    color: #383838;
  }
  &-keyframe{
    overflow: inherit;
    position: absolute;
    width: 14px;
    height: 14px;
    transform: rotate(
      45deg
    ) scale(.8);
    background: #aabbcc;
    border: none;
    border-radius: 5px;
   
  }
  &-keyframe:hover{
    transform: rotate(
      45deg
    ) scale(1);
  }
}
.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none; /* Standard syntax */
}
</style>